<template>
    <el-container>
        <el-header >
            <el-col class="over">
                <el-col   class="leftmenu">
                    <el-col  :span="6" class="left">
                        <span class="zi" style="text-align: left">输入评论内容：</span>
                        <el-input class="inputM" v-model="inputname" placeholder="商品名称"></el-input>
                    </el-col>

                    <el-col :span="2">
                        <el-button type="primary" plain class="btnsousuo" @click="sousuo">搜索</el-button>
                    </el-col>

<!--                    <el-col  :span="4" class="left zuo">-->
<!--                        <el-select v-model="value" placeholder="请选择操作" class="inputM">-->
<!--                            <el-option-->
<!--                                    v-for="item in options"-->
<!--                                    :key="item.value"-->
<!--                                    :label="item.label"-->
<!--                                    :value="item.value">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </el-col>-->
<!--                    <el-col :span="2">-->
<!--                        <el-button type="primary" plain class="btnsousuo">确定</el-button>-->
<!--                    </el-col>-->

                </el-col>

            </el-col>
        </el-header>


        <el-main>
            <el-table class="tablemenu"
                      :data="tableData"
                      stripe
                      style="width: 100%">


                <el-table-column
                        prop="commentId"
                        label="ID" width="60">
                </el-table-column>

                <el-table-column
                        prop="goodsName"
                        label="用户名称">
                </el-table-column>


                <el-table-column
                        prop="commentContent"
                        label="评论内容">
                </el-table-column>


                <el-table-column
                        prop="commentCreateTime"
                        label="评论时间">
                </el-table-column>


                <el-table-column   label="推荐">
                    <templete  slot-scope="scope">
                        <el-switch
                                v-model="(scope.row.commentRec).toString()"
                                active-value="1"
                                inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="changTui(scope.row)"
                        >
                        </el-switch>
                    </templete>
                </el-table-column>


                <el-table-column   label="状态">
                    <templete  slot-scope="scope">
                        <el-switch
                                v-model="(scope.row.commentStatus).toString()"
                                active-value="1"
                                inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="changeStatus(scope.row)"
                        >
                        </el-switch>
                    </templete>
                </el-table-column>


                <el-table-column prop="caozuo" label="操作">
                    <template slot-scope="scope">
                        <el-button   type="danger" icon="el-icon-delete" class="btn" circle @click="del(scope.row.commentId)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--页码-->

            <el-pagination class="rightye"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"

                           :page-size="5"
                           layout="total, prev, pager, next"
                           :total="count">
            </el-pagination>



        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "messnone",
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },

            //推荐
            changTui(data){
                data.commentRec==0?data.commentRec=1:data.commentRec=0;

                this.$axios.post('/api/comment/update/one?commentId='+data.commentId+'&commentRec'+data.commentRec).then((res)=>{

                    // console.log(res)
                    this.$message({
                        type:'success',
                        message: '推荐改变成功!'
                    });
                    this.getAllMess();

                })
            },







            //状态
            changeStatus(data){
                console.log(data)
                data.commentStatus==0 ? data.commentStatus=1:data.commentStatus=0
                // data.commentStatus==1 ? data.commentStatus=0:data.commentStatus=1
                this.$axios.post('/api/comment/update/one?commentId='+data.commentId+'&commentStatus='+data.commentStatus).then((res)=>{
                    // console.log(res)
                    this.$message({
                        type:'success',
                        message: '状态改变成功!'
                    });
                    this.getAllMess();
                })



            },





            //删除
            del(id){
                var arr=[];
                arr.push(id);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }). then(() =>{
                    this.$axios.post('/api/comment/delete',[...arr]).then((res)=>{
                        console.log(res.data)
                        this.getAllMess();
                    })
                    this.$message({
                        type:'success',
                        message: '删除成功!'
                    });
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'已取消删除!'
                    });
                });
            },



               //搜索
            sousuo(){
                // console.log(this.inputname)
                this.$axios.post('/api/comment/isViewList?commentKeyWords='+this.inputname).then((res)=>{
                    // console.log(res.data.data)
                    this.tableData=res.data.data
                    // this.getMess()
                    this.$message({
                        type:'success',
                        message: '搜索成功!'
                    });
                    this.getAllMess();
                })

            },




             //得到页面信息
              getAllMess(){
                  this.$axios.post('/api/comment/notViewList').then((res)=>{
                      // console.log(123456)
                      // console.log(res)
                      this.tableData=res.data.data
                      this.count=res.data.count;
                  })
              }


        },
             data() {
            return {
                inputname: '',
                count:null,

                options: [{
                    value: '选项1',
                    label: '删除评论'
                }, {
                    value: '选项2',
                    label: '允许显示'
                },
                {
                    value: '选项3',
                    label: '禁止显示'
                }],
                value: '',
                totalCount:20,
                tableData: [


                ]

            }
        },



        created() {
            this.getAllMess();
        },


        //重新加载的
        updated() {
            this.getAllMess()
        }
    }
</script>

<style scoped>
    .left{
        text-align:left;
    }
    .zi{
        font-size: 14px;
        color: black;
    }
    .inputM{
        width: 200px;
        height: 32px;
        border-radius: 40%;
    }
    .zuo{
        margin-left: 520px;
    }
    .rightye{
        margin-top: 10px;
        float: right;
    }

</style>